<template>
    <div class="home">
        <!-- 用户信息 -->
        <el-row :gutter="15">
          

            <el-col :md="24" :lg="5" :xl="4">
                <!-- 用户信息卡片 -->
                <el-card shadow="hover" class="mb15 user-info-card">
                    <template #header>
                        <div class="user-card-header">
                            <el-icon class="user-icon">
                                <User />
                            </el-icon>
                            <span>用户信息</span>
                        </div>
                    </template>
                    <div class="user-profile">
                        <!-- 用户姓名 -->
                        <div class="user-info-item">
                            <div class="user-info-icon">
                                <el-icon>
                                    <User />
                                </el-icon>
                            </div>
                            <div class="user-info-content">
                                <div class="user-info-label">姓名</div>
                                <div class="user-info-value">{{ info.name }}</div>
                            </div>
                        </div>
                        <!-- 职位 -->
                        <div class="user-info-item">
                            <div class="user-info-icon">
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                            </div>
                            <div class="user-info-content">
                                <div class="user-info-label">职位</div>
                                <div class="user-info-value">{{ info.role_name }}</div>
                            </div>
                        </div>
                        <!-- 手机号码 -->
                        <div class="user-info-item">
                            <div class="user-info-icon">
                                <el-icon>
                                    <Phone />
                                </el-icon>
                            </div>
                            <div class="user-info-content">
                                <div class="user-info-label">手机号码</div>
                                <div class="user-info-value">{{ info.mobile }}</div>
                            </div>
                        </div>
                        <!-- 所属部门 -->
                        <div class="user-info-item">
                            <div class="user-info-icon">
                                <el-icon>
                                    <OfficeBuilding />
                                </el-icon>
                            </div>
                            <div class="user-info-content">
                                <div class="user-info-label">所属部门</div>
                                <div class="user-info-value">{{ info.department_name }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

            </el-col>

            <el-col :md="24" :lg="19" :xl="20" class="mb15">
                <!-- 系统公告 -->
                <el-card shadow="hover" class="mb15">
                    <template #header>
                        <div class="card-header">
                            <div class="card-title">
                                <el-icon class="card-icon">
                                    <InfoFilled />
                                </el-icon>
                                <span>系统公告</span>
                            </div>

                        </div>
                    </template>
                    <div class="info">
                        <ul class="info-ul">
                            <li class="info-item" v-for="(item, index) in notice" :key="index">
                                <div class="info-item-left" @click="handleViewNotice(item)">{{ item.title }}</div>
                                <div class="info-item-right">{{ item.addtime }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 查看公告弹窗 -->
        <el-dialog v-model="noticeDialogVisible" title="查看公告" width="800px" class="notice-view-dialog">
            <div class="notice-view-content">
                <div class="notice-title">{{ currentNotice.title }}</div>
                <div class="notice-meta">
                </div>
                <div class="notice-content" v-html="currentNotice.content"></div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="noticeDialogVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { User, Avatar, Phone, OfficeBuilding, InfoFilled } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

// 用户存储
const userStore = useUserStore()

// 用户信息
const info = computed(() => userStore.employeeInfo)

// 公告信息
const notice = computed(() => {
    return userStore.notice || []
})

// 弹窗相关
const noticeDialogVisible = ref(false)

// 当前查看的公告数据
const currentNotice = ref({
    title: '',
    content: '',
    addtime: ''
})

// 页面挂载时确保数据已加载
onMounted(() => {
    // 如果用户数据为空，重新加载
    if (!userStore.isLoggedIn || userStore.notice.length === 0) {
        userStore.restoreUserInfo()
    }
})


// 查看公告详情
const handleViewNotice = (item) => {
    currentNotice.value = {
        title: item.title || '',
        content: item.content || '',
        addtime: item.addtime || ''
    }
    noticeDialogVisible.value = true
}



</script>

<style scoped>
.home {
    overflow-x: hidden;
}

.mb15 {
    margin-bottom: 15px;
}



/* 卡片通用样式美化 */
.el-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.el-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

:deep(.el-card__body) {
    padding: 10px 20px;
}

/* 用户信息卡片样式 */
.user-item {
    padding: 10px 0;
}

.user-item-right {
    width: 100%;
}

.overflow {
    overflow: hidden;
}

.margin-top {
    margin-top: 10px;
}

.user-info-card :deep(.el-card__header) {
    background: #ffffff;
    color: var(--theme-primary);
    border-radius: 12px 12px 0 0;
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    min-height: 61px;
    display: flex;
    align-items: center;
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.user-icon {
    font-size: 18px;
}

/* 通用卡片标题样式 */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--theme-primary);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.card-icon {
    font-size: 18px;
}

/* 统一的用户信息项布局 */
.user-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.user-info-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.user-info-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.user-info-content {
    flex: 1;
}

.user-info-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-bottom: 4px;
}

.user-info-value {
    font-size: 13px;
    color: #303133;
    font-weight: 600;
}

/* 状态开关样式 */
.switch-with-tooltip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-switch {
    --el-switch-on-color: var(--theme-primary);
    --el-switch-off-color: #dcdfe6;
    --el-switch-border-color: #dcdfe6;
}

.status-switch :deep(.el-switch__label) {
    font-size: 12px;
    font-weight: 500;
}

.status-switch :deep(.el-switch__label.is-active) {
    color: var(--theme-primary);
}

.status-switch :deep(.el-switch__label:not(.is-active)) {
    color: #909399;
}



/* 二维码卡片样式 */
.qr-code-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.qr-code-card :deep(.el-card__header) {
    background: #ffffff;
    color: var(--theme-primary);
    border-radius: 12px 12px 0 0;
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    min-height: 56px;
    display: flex;
    align-items: center;
}

.qr-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.qr-icon {
    font-size: 18px;
}

.qr-code-container {
    padding: 20px;
    text-align: center;
}

.qr-code-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.qr_code {
    width: 100%;
    max-width: 160px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.qr_code:hover {
    transform: scale(1.05);
}

.qr-code-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #909399;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #e4e7ed;
}





.info-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.info-item:hover {
    background: var(--theme-primary);
    color: white;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item-left {
    flex: 1;
    color: inherit;
    font-size: var(--font-size-base);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-item-right {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.info-item:hover .info-item-right {
    color: rgba(255, 255, 255, 0.8);
}





/* 弹窗样式 */
.notice-view-dialog :deep(.el-dialog__header) {
    padding: 20px 20px 10px;
    border-bottom: 1px solid var(--theme-border-base);
}

.notice-view-dialog :deep(.el-dialog__title) {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.notice-view-dialog :deep(.el-dialog__body) {
    padding: 20px;
}

.notice-view-content {
    max-height: 500px;
    overflow-y: auto;
}

.notice-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 15px;
    line-height: 1.4;
    text-align: center;
}

.notice-meta {
    font-size: 12px;
    color: var(--theme-text-secondary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--theme-border-light);
}

.notice-content {
    font-size: var(--font-size-base);
    line-height: 2;
    color: var(--theme-text-primary);
}

.notice-content :deep(img) {
    max-width: 100%;
    height: auto;
}



.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 20px 0;
    border-top: 1px solid var(--theme-border-base);
}





/* 空状态样式 */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}
</style>